<template>
    <u-col>
        <v-app-bar color="white" flat app>
            <v-btn icon @click="$routerTo($routerName.talk)">
                <v-icon>arrow_back</v-icon>
            </v-btn>
            <v-toolbar-title>未读消息</v-toolbar-title>
            <v-spacer></v-spacer>
            <!--            <v-btn text color="black"><span class="title">清空</span></v-btn>-->
        </v-app-bar>
        <v-divider></v-divider>

        <div v-for="item in notifies">
            <v-list-item three-line @click="$routerTo($routerName.talkDetail,{talkId:item.talkId})">
                <v-list-item-avatar
                        size="40"
                        tile
                >
                    <v-img :src="$imgUrl+item.headImg"></v-img>
                </v-list-item-avatar>
                <v-list-item-content class="align-self-start">

                    <v-list-item-title class="subtitle-2">
                        <a>{{item.nickname}}</a>
                    </v-list-item-title>

                    <v-list-item-subtitle v-text="item.content" class="body-2 black--text">
                    </v-list-item-subtitle>

                    <v-list-item-subtitle class="mt-5px">
                        {{item.createTime | formatTime}}
                    </v-list-item-subtitle>
                </v-list-item-content>

                <v-list-item-avatar
                        size="65"
                        tile
                >
                    <v-img v-if="item.replyImg" :src="$imgUrl+item.replyImg"></v-img>
                    <v-img v-else class="grey lighten-2">
                        <v-list-item-subtitle class="row-all-center" v-text="item.replyContent">
                        </v-list-item-subtitle>
                    </v-img>
                </v-list-item-avatar>
            </v-list-item>

            <v-divider inset></v-divider>
        </div>
    </u-col>
</template>

<script lang="ts">


  import {Vue, Component, Prop, Watch} from 'vue-property-decorator'
  import {namespace} from "vuex-class"
  import User from "@/model/User"
  import UnreadNotify from "@/model/UnreadNotify"
  import RouterName from "@/const/RouterName"

  const notifyModule = namespace('notify')

  /**
   * todo 需要支持发表情,数据库字段，img字段img改为了src, 所有被封禁的用户允许登录查看，但是不允许操作，提示账号已被封禁
   * 发说说的时候限制字符长度 140个字
   * 取消身份认证功能
   */
  @Component
  export default class NotifyVue extends Vue {
    @notifyModule.State('unreadNotifies') unreadNotifies: UnreadNotify[]

    notifies: UnreadNotify[] = []

    @Watch('notifies')
    watchNotify() {
      console.log(this.notifies)
    }

    created() {
      this.$store.dispatch('notify/queryUnreadNotifiesAndUpdateHasRead').then(() => {
        this.notifies = this.unreadNotifies
        this.$store.dispatch('notify/queryUnreadNotifies')
      })
      this.$root.$on('notifyVueRefresh', () => {
        console.log('触发了监听')
        this.$store.dispatch('notify/queryUnreadNotifiesAndUpdateHasRead').then(() => {
          this.notifies = this.unreadNotifies
          this.$store.dispatch('notify/queryUnreadNotifies')
        })
      })
    }
  }
</script>
